<template>
    <div style="width: 100%;height: 100%">
        <div class="map-center-base" style="width: 100%;height: 100%"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import {firChatSizeVw,firChatSizeVh} from '@/utils/echartsFont'
import {shengMap} from '@/assets/map/sheng'
import screenOrWh from "@/utils/screenOrWh";
import instance from "@/api";
let mendianshuliangEcharts = null
export default {
    name: "mapcenter",
    data(){
        return {
            barndQiId:'',
            screenOrWh:screenOrWh,
            mapSetOption:{
                title: {
                    show:false
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>{c}'
                },
                visualMap: {
                    min: 0,
                    max: 50000,
                    text: ['最大', '最小'],
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['lightskyblue', 'yellow', 'orangered']
                    },
                    textStyle:{
                        color: '#fff'
                    }

                },
                series: [
                    {
                        name: '中国',
                        type: 'map',
                        map: 'zhongguo',
                        center:['50%','70%'],
                        zoom:2.2,
                        roam:true,
                        label: {
                            show: true,
                        },
                        data: []
                    }
                ]
            }
        }
    },
    mounted() {
        //初始化门店数量
        this.$nextTick(()=>{
            mendianshuliangEcharts = echarts.init(document.querySelector('.map-center-base'));
            this.getMapJson()
        })

        window.addEventListener('resize', () => {
            if(mendianshuliangEcharts){
                mendianshuliangEcharts.resize()
            }
        })
    },
    methods:{
        getMapJson(){
            echarts.registerMap('zhongguo', shengMap);
            //后端交互
            mendianshuliangEcharts.setOption(this.mapSetOption)

        },
        getMenDianNum(brandQi = ''){
            if(brandQi) this.barndQiId = brandQi
            instance.get('/base/dashboard/province',{
                params:{
                    periodId:this.barndQiId,
                    projectId:sessionStorage.getItem('projectId')
                }
            }).then(res => {
                if(res.data.code == 200){
                    this.mapSetOption.series[0].data = []
                    for(let val of res.data.data){
                        this.mapSetOption.series[0].data.push({
                            name:val.name,
                            value:val.value,
                            label: {
                                normal: {
                                    show: true,
                                    formatter: function (params) {
                                        return params.name+"\n"+ params.value + '分';    //地图上展示文字 + 数值
                                    }
                                }
                            }
                        })
                    }
                    mendianshuliangEcharts.setOption(this.mapSetOption)
                }
                else{
                    this.mapSetOption.series[0].data = []
                    mendianshuliangEcharts.setOption(this.mapSetOption)
                    this.$message.error(res.data.msg || '信息获取失败')
                }

            })
        }
    }
}
</script>

<style scoped lang="scss">

</style>
